<script setup lang="ts">
import { watch, ref, reactive, toRefs } from 'vue'
import cascader from '../../../components/cascader/index.vue'
import { filterInvesS, filterInvesT, Download } from '../../../http/api'
import pagination from '../../../components/pagination/index.vue'
import fileDownload from 'js-file-download'
import downLoadNotice from '../../../components/downLoadNotice/index.vue'
import downLoadNotices from '../../../hooks/downLoadNotice'

const value = reactive({ tFlag: true, district_id: -1, city_id: -1, gender: "全部", districtFlag: false, city: '', district: '' })




const loading = ref(false)
const query = async (val: number) => {

    const { tFlag, district_id, city_id, gender, districtFlag } = value
    if (city_id === -1 && district_id === -1) return
    loading.value = true
    const obj = {} as any
    if (districtFlag) {
        obj.district_id = district_id
        obj.city_id = city_id
    } else
        obj.city_id = city_id
    switch (gender) {
        case "全部":
            break
        default:
            obj.gender = gender
    }
    if (tFlag)
        await filterInvesT({ ...obj, page: val }).then((res: any) => {
            data.total_pages = res.total_pages
            data.total_records = res.total_records
            data.data = res.data
        })
    else {
        await filterInvesS({ ...obj, page: val }).then((res: any) => {
            data.total_pages = res.total_pages
            data.total_records = res.total_records
            data.data = res.data
        })
    }
    loading.value = false

}

const data = reactive({ data: [], total_pages: 0, total_records: 0 }) as any

watch(value, () => {
    data.data = []
    data.total_pages = 0
    data.total_records = 0
})


const change = (data: any) => {
    if (data[1].length === 2) {
        value.districtFlag = true
        value.district_id = data[1][1]
        value.city_id = data[1][0]
        value.city = data[2][0]
        value.district = data[2][1]
    }
    else {
        value.districtFlag = false
        value.city_id = data[1][0]
        value.city = data[2][0]
    }

}



const downLoadData = reactive({ tip: '', dowmloadLOading: false })

const download = async () => {
    const { tFlag, district_id, city_id, districtFlag, city, district, gender } = value
    if (city_id === -1 && district_id === -1) return
    downLoadData.dowmloadLOading = true
    let tip = ''
    const obj = {} as any
    tip = city + ''
    if (districtFlag) {
        tip = tip + district + ''
        obj.district_id = district_id
    } else {

        obj.city_id = city_id
    }
    obj.city_id = city_id
    if (tFlag) {
        tip = tip + "教师"
        obj.type = 'teacher'
        obj.city_id = city_id
    } else {
        tip = tip + "学生"
        if (city_id === 11) {
            obj.type = 'student_gz'
        }
        else obj.type = 'student'
    }
    switch (gender) {
        case "全部":
            break
        default:
            obj.gender = gender
    }
    downLoadData.tip = tip
    await Download(obj).then( (res: any) => {
       if(res.code===0){

       }
       else fileDownload(res, `${tip}问卷.xlsx`)
    }).catch(() => {
        alert("筛选项中没有问卷")
    })
    downLoadData.dowmloadLOading = false
    downLoadNotices(0)
}


</script>

<template>
    <el-row>
        <el-col :span="20" :offset="2">
            <div class="dw-table-form" style="padding-left: 60px;">
                <div class="chooseArea">
                    <span>选择性别:</span>
                    <span>
                        <el-select placeholder="性别" v-model="value.gender" clearable>
                            <el-option label="全部" value="全部"></el-option>
                            <el-option label="男" value="M"></el-option>
                            <el-option label="女" value="F"></el-option>
                        </el-select>
                    </span>
                    <span>问卷类别:</span>
                    <span>
                        <el-switch v-model="value.tFlag"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" inline-prompt
                            active-text="教师" size="large" inactive-text="学生" />
                    </span>
                    <span style="display:flex;align-items:center">
                        选择地区：
                        <cascader :check="true" :msg="'area'" @change="change" />
                    </span>
                </div>
                <div class="query">
                    <el-button type="success" @click="download" class="button"
                        :loading="downLoadData.dowmloadLOading">下载问卷
                    </el-button>
                    <el-button type="primary" @click="query(1)" class="button" :loading="loading">查询</el-button>
                </div>
            </div>
            <div class="dw-table">
                <el-table :data="data.data" stripe style="width: 100%" v-if="!value.tFlag">
                    <el-table-column prop="stu_name" label="学生姓名" />
                    <el-table-column prop="school_city" label="所在城市" />
                    <el-table-column prop="school_district" label="所在地区" />
                    <el-table-column prop="school_name" label="学校名称" />
                    <el-table-column prop="class" label="班级" />
                    <el-table-column prop="age" label="出生年月" />
                </el-table>
                <el-table :data="data.data" stripe style="width: 100%" v-else>
                    <el-table-column prop="user_id" label="教师id" />
                    <el-table-column prop="school_name" label="学校名称" />
                    <el-table-column prop="school_city" label="城市" />
                    <el-table-column prop="school_district" label="地区" />
                </el-table>
                <div class="dw-pagination">
                    <pagination :total="data.total_records" @current-change="query" :page-count="data.total_pages" />


                </div>
            </div>
        </el-col>
        <downLoadNotice :content="downLoadData.tip" :dialogVisible="downLoadData.dowmloadLOading"></downLoadNotice>
    </el-row>



</template>

<style lang="scss" scoped>
.chooseArea {
    display: flex;
    align-items: center;
    margin: 20px;

    >span {
        margin: 0 5px;
    }
}

.query {
    margin: 0px 0px 20px 20px;

    .button {
        padding: 20px;
        width: 120px;
    }
}

.dw-table-form {
    background-color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
}

.dw-table {
    background: white;
    padding: 20px;
}

.dw-pagination {
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>